<script setup>
import * as Api from "@req/api";
import { suc, upImgFun } from "@/utils";
import { Modal, message } from "ant-design-vue";
import { ref, onMounted, defineProps, watch, shallowRef, nextTick, defineEmits } from "vue";
import { LoadingOutlined, PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import EditorCom from "@/components/EditorCom/index.vue";

const fileLoading = ref(false);
const fileListLoading = ref(false);
const fileList = ref([]);
const emit = defineEmits(['close']);
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  editId: {
    type: String,
    default: () => { }
  }
});
const form = ref({
  title: null,
  content: '',
  img: '',
  desc: '',
  detail: '',
});

const queryPd = () => {
  if (props.editId) {
    Api.queryBlog(props.editId).then((res) => {
      if (suc(res.status)) {
        let data = JSON.parse(res.data.content)
        res.data = { ...data }
        form.value = res.data;
      }
    })
  }
}

const onClose = (type) => {
  emit('close', { type });
}

const onSubmit = () => {
  const resFun = (res) => {
    if (suc(res.status)) {
      message.success(res.message);
      onClose(true);
    } else {
      message.error("添加失败");
    }
  }
  form.value.content = JSON.stringify(form.value)

  if (props.editId) {
    Api.editBlog(props.editId, form.value).then((res) => {
      resFun(res)
    });
  } else {
    form.value.author = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')).username : ''
    form.value.blog_type = 'blog'
    Api.addBlog(form.value).then((res) => {
      resFun(res)
    });
  }
}

const upFile = async (file) => {
  fileLoading.value = true;
  form.value.img = await upImgFun(file)
  fileLoading.value = false;
}

watch(() => props.editId, (val) => {
  if (val) {
    queryPd();
  } else {
    form.value = {
      name: null,
      content: '',
    }
  }
});


const delImg = (index) => {
  form.value.img = null;
}

</script>

<template>
  <a-drawer v-model:open="props.open" :title="editId ? '编辑博客' : '添加博客'" width="100%" :closable="false"
    :footer-style="{ textAlign: 'right' }" @close="onClose">
    <a-form :model="form" name="basic" class="form" autocomplete="off">
      <a-form-item label="标题" name="title" :rules="[{ required: true, message: '请输入博客标题' }]">
        <a-input v-model:value="form.title" :bordered="false" placeholder="请输入博客标题" />
      </a-form-item>
      <a-form-item label="简介" name="desc" :rules="[{ required: true, message: '请输入博客描述' }]">
        <a-input v-model:value="form.desc" :bordered="false" placeholder="请输入博客描述" />
      </a-form-item>
      <a-form-item label="封面" name="image">
        <div class="upload-box">
          <div class="up-img" v-if="form.img">
            <a-image :src="form.img" width="240px" height="100px" alt="main-img" />
            <close-circle-outlined class="close-icon" @click="delImg('img')" />
          </div>
          <a-upload v-else name="avatar" list-type="picture-card" class="avatar-uploader" :customRequest="upFile"
            :show-upload-list="false">
            <div>
              <loading-outlined v-if="fileLoading"></loading-outlined>
              <plus-outlined v-else></plus-outlined>
              <div class="ant-upload-text">Upload</div>
            </div>
          </a-upload>
        </div>
        <span class="tips">tips: 建议图片比例 <span>12</span> ：<span>5</span></span>
      </a-form-item>
      <a-form-item label="内容" name="content" style="margin-bottom: 40px">
        <EditorCom v-if="props.open" :value="form.detail" @changeValue="(val) => { form.detail = val }"></EditorCom>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose(false)">Cancel</a-button>
      <a-button type="primary" @click="onSubmit">Submit</a-button>
    </template>
  </a-drawer>
</template>

<style lang="postcss" scoped>
.form {
  height: 100%;
  display: flex;
  padding: 30px 30px 0;
  flex-direction: column;


  ::v-deep .ant-form-item-label>label {
    justify-content: end;
    width: 100px;
  }

  .up-img {
    position: relative;
    width: 240px;
    height: 100px;

    &.list {
      width: 100px;
      height: 100px;
    }

    ::v-deep .ant-image {
      border-radius: 10px;
      overflow: hidden;

      .ant-image-img {
        object-fit: cover;
      }
    }

    .close-icon {
      position: absolute;
      z-index: 1;
      font-size: 25px;
      right: -10px;
      top: -10px;
      cursor: pointer;
    }
  }

  .upload-box {
    ::v-deep .ant-upload {
      overflow: hidden;
      width: 240px;
      height: 100px;
      box-sizing: border-box;

      &.ant-upload-select {
        width: 240px;
        height: 100px;
        box-sizing: border-box;
      }
    }
  }

}
</style>